<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import { useForm } from 'vee-validate'
import * as z from 'zod'
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'

defineOptions({
  name: 'AgentAddForm',
})

const emits = defineEmits<{
  onAgentAdd: [account?: string]
  onAgentManage: [account?: string]
}>()

const loading = ref(false)

const form = useForm({
  validationSchema: toTypedSchema(z.object({
    agentBaseUrl: z.string().min(1, '请输入AgentBaseUrl'),
    agentToken: z.string().min(1, '请输入AgentToken'),
  })),
  initialValues: {
    agentBaseUrl: '',
    agentToken: '',
  },
})
const onSubmit = form.handleSubmit(() => {
  // loading.value = true
  // emits('onAgentAdd', values.account)
})
</script>

<template>
  <div class="w-full flex-col-stretch-center p-12">
    <form @submit="onSubmit">
      <div class="mb-8 space-y-2">
        <h3 class="text-4xl color-[var(--el-text-color-primary)] font-bold">
          添加Agent
        </h3>
      </div>
      <FormField v-slot="{ componentField, errors }" name="agentBaseUrl">
        <FormItem class="relative pb-6">
          <FormControl>
            <FaInput type="text" placeholder="请输入AgentBaseUrl" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
          </FormControl>
          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
            <FormMessage class="absolute bottom-1 text-xs" />
          </Transition>
        </FormItem>
      </FormField>
      <FormField v-slot="{ componentField, errors }" name="agentToken">
        <FormItem class="relative pb-6 space-y-0">
          <FormControl>
            <FaInput type="text" placeholder="请输入AgentToken" class="w-full" :class="errors.length && 'border-destructive'" v-bind="componentField" />
          </FormControl>
          <Transition enter-active-class="transition-opacity" enter-from-class="opacity-0" leave-active-class="transition-opacity" leave-to-class="opacity-0">
            <FormMessage class="absolute bottom-1 text-xs" />
          </Transition>
        </FormItem>
      </FormField>
      <FaButton :loading="loading" size="lg" class="mt-4 w-full" type="submit">
        确认
      </FaButton>
      <div class="mt-4 flex-center gap-2 text-sm color-[var(--el-text-color-secondary)]">
        <FaButton variant="link" class="h-auto p-0" @click="emits('onAgentManage', form.values.agentToken)">
          跳转到管理页面
        </FaButton>
      </div>
    </form>
  </div>
</template>
